<style lang="scss" scoped>
.ag-header-component {
    &:hover {
        .customHeaderMenuButton {
            opacity: 1;
            transition: opacity 0.2s, border 0.2s;
        }
    }
    .customHeaderLabel {
        color: #102d53;
        font-weight: 800;
        cursor: pointer;
        float: left;
    }
    .customHeaderMenuButton {
        float: right;
        margin-top: 5px;
        opacity: 0;
        transition: opacity 0.2s, border 0.2s;
    }
    .customSortDownLabel {
        float: left;
        margin-left: 10px;
        margin-top: 5px;
        div {
            width: 95px;
            height: 27px;
        }
    }

    .customSortUpLabel {
        float: left;
        margin-left: 3px;
        margin-top: 4px;
    }
}
</style>


<script>
import {pdfUrl} from '@/common/js/Base.js'
export default Vue.extend({
    template: `<div class="ag-header-component">
    <a class="customHeaderLabel" target="_blank" :href='pdfurl'> {{params.displayName}}</a>
    <div v-if='params.enableMenu' id='menuButton' class="customHeaderMenuButton" @click="onMenuClicked($event)"><span class="ag-icon ag-icon-menu"></span></i></div>
    <div v-if="params.enableSorting"  class="customSortDownLabel">
    <div  @click="onSortRequested('desc', $event)" v-if='params.column.sort=="asc"'><span class="ag-icon ag-icon-asc"></span></div>
    <div @click="onSortRequested('', $event)" v-if='params.column.sort=="desc"'><span class="ag-icon ag-icon-desc"></span></div>
    <div @click="onSortRequested('asc', $event)" v-else><span class="ag-icon"></span></div>
    </div>
    </div>`,
    // http://10.131.101.142:8201/
    // http://14.18.42.211:82
// 10.131.101.142
// 192.168.165.65
    data() {
        return {
            pdfurl:pdfUrl.pdfurl,
        }
    },
    methods: {
        onMenuClicked(event) {
            this.params.showColumnMenu(event.target);
        },
        onSortRequested(order, event) {
            this.params.setSort(order, event.shiftKey);
        }
    },
    created() {

    }
})
</script>